<template>
  <!-- <div class="header">
    <div class="title">销售申请</div>
    <div>
      <el-tabs v-model="querys.status" @tab-click="handleClick">
        <el-tab-pane label="全部" :name="0"></el-tab-pane>
        <el-tab-pane label="待审核" :name="1"></el-tab-pane>
        <el-tab-pane label="待签约" :name="2"></el-tab-pane>
        <el-tab-pane label="待放款" :name="3"></el-tab-pane>
      </el-tabs>
    </div>
  </div> -->
  <!-- 卖家需要让平台帮忙卖车到海外 但是没卖出去钱还没有 这个时候中艺用卖家身份像银行借钱先帮卖周转  
   等中艺把车卖了给卖家钱 卖家用这个钱还银行 -->
  <c-main-template
    class="mr-24 ml-24 mt-24"
    minHeight="auto"
    :isBreadcrumb="false"
  >
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">销售申请单单号：</div>
          <el-input
            size="large"
            placeholder="请输入销售申请单单号"
            v-model="querys.id"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">借款银行：</div>
          <el-select
            v-model="querys.bankId"
            size="large"
            class="wh flex-1 mr-lg"
            placeholder="请选择借款银行"
          >
            <el-option
              v-for="item in bankList"
              :key="item.id"
              :label="item.bankName"
              :value="item.id"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">状态：</div>
          <el-select
            v-model="querys.status"
            size="large"
            class="wh flex-1 mr-lg"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in salesTableType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mg-24"
    minHeight="auto"
    title="销售申请列表"
    :isBreadcrumb="false"
  >
    <template #operate>
      <el-button @click="handleAdd" :icon="Plus" size="large" type="primary"
        >销售申请</el-button
      >
    </template>
    <c-table-template :data="tableData">
      <el-table-column align="center" type="index" label="序号" width="60" />
      <el-table-column
        prop="id"
        label="销售申请单号"
        align="center"
        width="350"
      />
      <el-table-column
        prop="bankName"
        label="借款银行"
        align="left"
        width="300"
      />
      <el-table-column prop="storeName" label="车辆入仓仓库" align="center" />
      <el-table-column prop="timeCreate" label="创建时间" align="left">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          {{ getStatusLabel(salesTableType, scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <!-- 驳回 -->
          <el-button
            v-if="scope.row.status === 0"
            type="primary"
            link
            @click="handleAnewApply(scope.row)"
            >重新申请</el-button
          >
          <!-- 待签约 -->
          <el-button
            v-if="scope.row.status === 2"
            type="primary"
            link
            @click="handleUploadContract(scope.row)"
          >
            上传合同
          </el-button>
          <!-- 待入库 并且未上传凭证  isDepositUploaded false 未上传  true 已上传-->
          <el-button
            v-if="scope.row.status === 6 && !scope.row.isDepositUploaded"
            type="primary"
            link
            @click="handleGoLoanDeposit(scope.row)"
            >上传凭证</el-button
          >
          <el-button type="primary" link @click="handleDetails(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
  <c-sales-form ref="cSalesFormRef" @change="tableList" />
  <c-contract-upload ref="cContractUploadRef" @change="tableList" />
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { useRouter } from "vue-router";
import { getStatusLabel, salesTableType } from "@/utils/status.js";
import cSalesForm from "./components/SalesForm.vue";
import cContractUpload from "./components/ContractUpload.vue";
const { proxy } = getCurrentInstance();
const router = useRouter();
const cSalesFormRef = ref();
const bankList = ref([]);
const cContractUploadRef = ref();
onMounted(() => {
  querys.value.status = "";
  proxy
    .$get({
      url: "/bank/getBankList",
    })
    .then((res) => {
      bankList.value = res;
    });
});
const handleUploadContract = (item) => {
  cContractUploadRef.value.handleOpen({
    id: item.id,
  });
};
const handleGoLoanDeposit = (item) => {
  router.push({
    path: "/Loan",
    query: {
      key: 1,
      id: item.id,
    },
  });
};
const handleAdd = () => {
  cSalesFormRef.value.handleOpen();
};
const handleAnewApply = (item) => {
  cSalesFormRef.value.handleOpen(item);
};
const handleDetails = (item) => {
  router.push({
    path: "/SalesApplication/Details",
    query: {
      id: item.id,
    },
  });
};
const handleReset = () => {
  querys.value = {
    current: 1,
    size: 10,
    status: "",
  };
  tableList();
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/sellerCarInApply/supplierPage",
});
</script>